<template>
  <div class="detail-container">
    <div class="left-item-group">
      <div class="left-top-item">
        <div class="info-bottom-group">
          <div class="info-title">
            <div>
              <span>客户信息</span>
              <el-link
                @click="putDialogVisible = true"
                :underline="false"
                style="color: #409eff;"
                icon="el-icon-edit"
              >编辑</el-link>
            </div>
            <el-button @click.native.prevent="back()" type="primary" plain>返回</el-button>
          </div>
          <div class="customer-info">
            <div class="info-item">
              <span class="info-label">客户名称</span>
              {{profileForm.customerName}}
            </div>
            <div class="info-item">
              <span class="info-label">真实姓名</span>
              {{profileForm.realName}}
            </div>
            <div class="info-item">
              <span class="info-label">客户电话</span>
              {{profileForm.phone}}
            </div>
            <div class="info-item">
              <span class="info-label">客户邮箱</span>
              {{profileForm.email}}
            </div>
            <div class="info-item">
              <span class="info-label">客户公司</span>
              {{profileForm.company}}
            </div>
            <div class="info-item">
              <span class="info-label">客户地址</span>
              {{profileForm.address}}
            </div>
            <div class="info-item">
              <span class="info-label">客户等级</span>
              {{profileForm.level}}
            </div>
            <div class="info-item">
              <span class="info-label">客户来源</span>
              {{profileForm.channel}}
            </div>
            <div class="info-item">
              <span class="info-label">客户备注</span>
              {{profileForm.remark}}
            </div>
            <div class="info-item">
              <span class="info-label">客户标签</span>
              <el-tag type="success">已上市</el-tag>
              <el-tag type="success">潜在客户</el-tag>
            </div>
          </div>
          <div class="info-item">
            <span class="info-label">创建时间</span>
            {{profileForm.createTime}}
          </div>
          <div class="info-item">
            <span class="info-label">更新于</span>
            {{profileForm.updateTime}}
          </div>
          <div class="info-item">
            <span class="info-label">最后登陆</span>
            {{profileForm.lastedLoginTime}}
          </div>
        </div>
      </div>
    </div>

    <div class="right-item-group">
      <div class="right-top-item">
        <div class="right-top-left-group">
          <el-avatar :size="70" :src="avatarUrl"></el-avatar>
          <div class="customer-info-group">
            <div class="customer-name">{{profileForm.realName}}</div>
            <div class="customer-city">北京</div>
          </div>
        </div>
        <div class="right-top-buttom">
          <el-button @click="addDialogVisible=true" type="primary">创建工单</el-button>
          <el-button @click="deleteDialogVisible=true" type="primary" plain>删除客户</el-button>
          <el-button @click="blackDialogVisible=true" type="primary" plain>拉黑客户</el-button>
        </div>
      </div>

      <div class="right-bottom-item">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="历史会话" name="1">
            <div class="tab-item-group">
              <div class="top-button-group">
                <el-button
                  type="primary"
                  round
                  :plain="historyOrderActive!=1"
                  @click="historyOrderActive=1"
                  size="small"
                >全 部</el-button>
                <el-button
                  type="primary"
                  round
                  :plain="historyOrderActive!=2"
                  @click="historyOrderActive=2"
                  size="small"
                >本 周</el-button>
                <el-button
                  type="primary"
                  round
                  :plain="historyOrderActive!=3"
                  @click="historyOrderActive=3"
                  size="small"
                >本 月</el-button>
                <el-button
                  type="primary"
                  round
                  :plain="historyOrderActive!=4"
                  @click="historyOrderActive=4"
                  size="small"
                >上 月</el-button>
              </div>
              <div class="middle-table-gorup">
                <el-table
                  :header-cell-style="{'background-color':'#e6f1ff','height':'62px'}"
                  ref="multipleTable"
                  :data="historySessionData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                  :cell-style="cellStyle"
                >
                  <el-table-column prop="col1" label="访问时间" align="center"></el-table-column>
                  <el-table-column prop="col2" label="来源" align="center"></el-table-column>
                  <el-table-column prop="col3" label="客服" align="center"></el-table-column>
                  <el-table-column prop="col4" label="受理客服组" align="center"></el-table-column>
                  <el-table-column prop="col5" label="访问时长" align="center"></el-table-column>
                  <el-table-column prop="col6" label="满意度" align="center"></el-table-column>
                </el-table>
              </div>
              <div class="bottom-pagination-group">
                <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, prev, pager, next,sizes, jumper"
                  :total="400"
                ></el-pagination>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="历史工单" name="2">
            <div class="tab-item-group">
              <div class="top-button-group">
                <el-button
                  type="primary"
                  round
                  :plain="historySessionActive!=1"
                  @click="historySessionActive=1"
                  size="small"
                >全 部</el-button>
                <el-button
                  type="primary"
                  round
                  :plain="historySessionActive!=2"
                  @click="historySessionActive=2"
                  size="small"
                >本 周</el-button>
                <el-button
                  type="primary"
                  round
                  :plain="historySessionActive!=3"
                  @click="historySessionActive=3"
                  size="small"
                >本 月</el-button>
                <el-button
                  type="primary"
                  round
                  :plain="historySessionActive!=4"
                  @click="historySessionActive=4"
                  size="small"
                >上 月</el-button>
              </div>

              <div class="middle-table-gorup">
                <el-table
                  :header-cell-style="{'background-color':'#e6f1ff','height':'62px'}"
                  ref="multipleTable"
                  :data="historyOrderData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column prop="id" label="工单ID" align="center"></el-table-column>
                  <el-table-column prop="title" label="工单标题" align="center"></el-table-column>
                  <el-table-column prop="channel" label="工单渠道" align="center"></el-table-column>
                  <el-table-column prop="state" label="工单状态" align="center"></el-table-column>
                  <el-table-column prop="customerName" label="客户姓名" align="center"></el-table-column>
                  <el-table-column prop="updateTime" label="最后更新时间" align="center"></el-table-column>
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button
                        style="font-size: 15px"
                        @click.native.prevent="getDetail(scope.$index, historyOrderData)"
                        type="text"
                        size="small"
                      >查看详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="bottom-pagination-group">
                <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[1, 2, 3, 4]"
                  :page-size="pageSize"
                  layout="total, prev, pager, next,sizes, jumper"
                  :total="totalData"
                ></el-pagination>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="拉黑记录" name="3">
            <div class="tab-item-group">
              <div class="top-button-group">
                <el-button
                  type="primary"
                  round
                  :plain="blackListActive!=1"
                  @click="blackListActive=1"
                  size="small"
                >全 部</el-button>
                <el-button
                  type="primary"
                  round
                  :plain="blackListActive!=2"
                  @click="blackListActive=2"
                  size="small"
                >本 周</el-button>
                <el-button
                  type="primary"
                  round
                  :plain="blackListActive!=3"
                  @click="blackListActive=3"
                  size="small"
                >本 月</el-button>
                <el-button
                  type="primary"
                  round
                  :plain="blackListActive!=4"
                  @click="blackListActive=4"
                  size="small"
                >上 月</el-button>
              </div>
              <div class="middle-table-gorup">
                <el-table
                  :header-cell-style="{'background-color':'#e6f1ff','height':'62px'}"
                  ref="multipleTable"
                  :data="blackListData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange2"
                  :cell-style="cellStyle"
                >
                  <el-table-column prop="time" label="拉黑时间" align="center" width="150px"></el-table-column>
                  <el-table-column
                    prop="customerServiceNickName"
                    label="操作客服"
                    align="center"
                    width="150px"
                  ></el-table-column>
                  <el-table-column prop="source" label="拉黑来源" align="center" width="150px"></el-table-column>
                  <el-table-column prop="reason" label="拉黑原因" align="center" width="600px"></el-table-column>
                </el-table>
              </div>
              <div class="bottom-pagination-group">
                <el-pagination
                  background
                  @size-change="handleSizeChange2"
                  @current-change="handleCurrentChange2"
                  :current-page="currentPage2"
                  :page-sizes="[1, 2, 3, 4]"
                  :page-size="pageSize2"
                  layout="total, prev, pager, next,sizes, jumper"
                  :total="totalData2"
                ></el-pagination>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <el-dialog title="编辑客户信息" top="9vh" :visible.sync="putDialogVisible" width="33%">
      <div class="add-dialog-style">
        <div style="padding-bottom:20px;color:#a2a2a2;font-size:13px">更多客户字段可在设置中进行配置</div>
        <el-form
          ref="putOrderForm"
          :model="profileForm"
          :rules="rules"
          label-position="left"
          label-width="120px"
        >
          <el-form-item required label="客户名称" prop="customerName">
            <el-input style="width:100%;" v-model="profileForm.customerName" placeholder="请输入客户名称"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input style="width:100%;" v-model="profileForm.realName" placeholder="请输入客户真实姓名"></el-input>
          </el-form-item>
          <el-form-item label="客户电话">
            <el-input style="width:100%;" v-model="profileForm.phone" placeholder="请输入客户客户电话"></el-input>
          </el-form-item>
          <el-form-item label="客户邮箱" prop="email">
            <el-input style="width:100%;" v-model="profileForm.email" placeholder="请输入客户客户邮箱"></el-input>
          </el-form-item>
          <el-form-item label="客户公司">
            <el-input style="width:100%;" v-model="profileForm.company" placeholder="请输入客户客户公司"></el-input>
          </el-form-item>
          <el-form-item label="客户地址">
            <el-input style="width:100%;" v-model="profileForm.address" placeholder="请输入客户客户地址"></el-input>
          </el-form-item>
          <el-form-item label="客户等级">
            <el-select style="width:100%;" v-model="profileForm.level" placeholder="请选择客户等级">
              <el-option label="普通客户" value="普通客户"></el-option>
              <el-option label="VIP客户" value="VIP客户"></el-option>
              <el-option label="潜在客户" value="潜在客户"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户来源">
            <el-select style="width:100%;" v-model="profileForm.channel" placeholder="请选择客户来源">
              <el-option label="客服录入" value="客服录入"></el-option>
              <el-option label="网页介入" value="网页介入"></el-option>
            </el-select>
          </el-form-item>
          <!--          <el-form-item label="选择标签">-->
          <!--            <el-checkbox-group v-model="profileForm.name9">-->
          <!--              <el-checkbox label="潜在客户" name="type"></el-checkbox>-->
          <!--              <el-checkbox label="上市公司" name="type"></el-checkbox>-->
          <!--            </el-checkbox-group>-->
          <!--          </el-form-item>-->
          <el-form-item label="客户备注">
            <el-input type="textarea" :rows="6" v-model="profileForm.remark" placeholder="请输入客户备注"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="handleClean" type="text" size="normal">清空</el-button>
        <el-button @click="putDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateForm">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="拉黑客户" top="27vh" :visible.sync="blackDialogVisible" width="33%">
      <div class="black-dialog-style">
        <el-form
          ref="blackOrderForm"
          :model="blackOrderForm"
          label-position="left"
          label-width="120px"
        >
          <el-form-item required label="拉黑原因" prop="reason">
            <el-input
              type="textarea"
              :rows="6"
              v-model="blackOrderForm.reason"
              placeholder="请输入拉黑原因"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="handleClean" type="text" size="normal">清空</el-button>
        <el-button @click="blackDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleBan">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新建工单" top="9vh" :visible.sync="addDialogVisible" width="33%">
      <div class="add-dialog-style">
        <el-form ref="addOrderForm" :model="addOrderForm" label-position="left" label-width="120px">
          <el-form-item :rules="{ required: true, message: '请选择工单分类'}" label="工单分类" prop="workType">
            <el-select style="width:100%;" v-model="addOrderForm.workType" placeholder="请选择">
              <el-option label="分类一" value="分类一"></el-option>
              <el-option label="分类二" value="分类二"></el-option>
              <el-option label="分类三" value="分类三"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :rules="{ required: true, message: '请输入工单标题'}" label="工单标题" prop="title">
            <el-input style="width:100%;" v-model="addOrderForm.title" placeholder="请输入工单标题"></el-input>
          </el-form-item>
          <el-form-item
            :rules="{ required: true, message: '请输入工单描述'}"
            label="工单描述"
            prop="attachments"
          >
            <el-input
              type="textarea"
              :rows="6"
              v-model="addOrderForm.attachments"
              placeholder="请输入工单描述"
            ></el-input>
          </el-form-item>
          <el-form-item label="抄送人" prop="cclist">
            <el-select style="width:100%;" v-model="addOrderForm.cclist" placeholder="请选择">
              <el-option
                v-for="csd in csData"
                :key="csd.customerServiceId"
                :label="csd.nickName"
                :value="csd.customerServiceId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="优先级" prop="priority">
            <el-radio-group v-model="addOrderForm.priority">
              <el-radio label="低"></el-radio>
              <el-radio label="中"></el-radio>
              <el-radio label="高"></el-radio>
              <el-radio label="紧急"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="工单状态" prop="state">
            <el-select style="width:100%;" v-model="addOrderForm.state" placeholder="请选择">
              <el-option label="未分配" value="未分配"></el-option>
              <el-option label="待处理" value="待处理"></el-option>
              <el-option label="处理中" value="处理中"></el-option>
              <el-option label="已解决" value="已解决"></el-option>
              <el-option label="已关闭" value="已关闭"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="受理客服组" prop="customerServiceGroupId">
            <el-select
              style="width:100%;"
              v-model="addOrderForm.customerServiceGroupId"
              placeholder="请选择"
            >
              <el-option
                v-for="gd in groupData"
                :key="gd.groupId"
                :label="gd.groupName"
                :value="gd.groupId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="受理客服">
            <el-select
              style="width:100%;"
              v-model="addOrderForm.customerServiceId"
              placeholder="请选择"
            >
              <el-option
                v-for="csd in csData"
                :key="csd.customerServiceId"
                :label="csd.nickName"
                :value="csd.customerServiceId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属客户">
            <el-select style="width:100%;" v-model="addOrderForm.customerId" placeholder="请选择">
              <el-option :label="profileForm.customerName" :value="profileForm.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="resetForm" type="text" size="normal">清空</el-button>
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCreateOrder">创建工单</el-button>
      </div>
    </el-dialog>

    <el-dialog title="删除确认" :visible.sync="deleteDialogVisible" top="34vh" width="26%">
      <div class="delete-dialog-style">客户信息删除后无法恢复，确定删除此客户信息吗？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleDelete">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  name: "CustomerDetail",
  components: {},
  props: {},
  data() {
    return {
      profileForm: {},
      avatarUrl: "",
      activeName: "1",
      historyOrderActive: 1,
      historySessionActive: 1,
      blackListActive: 1,
      historySessionData: [
        {
          col1: "2020/03/09 10:55",
          col2: "微信",
          col3: "客服小美",
          col4: "未分组",
          col5: "8分45秒",
          col6: "5"
        },
        {
          col1: "2020/03/09 10:55",
          col2: "微信",
          col3: "客服小美",
          col4: "未分组",
          col5: "8分45秒",
          col6: "5"
        },
        {
          col1: "2020/03/09 10:55",
          col2: "微信",
          col3: "客服小美",
          col4: "未分组",
          col5: "8分45秒",
          col6: "5"
        },
        {
          col1: "2020/03/09 10:55",
          col2: "微信",
          col3: "客服小美",
          col4: "未分组",
          col5: "8分45秒",
          col6: "5"
        },
        {
          col1: "2020/03/09 10:55",
          col2: "微信",
          col3: "客服小美",
          col4: "未分组",
          col5: "8分45秒",
          col6: "5"
        },
        {
          col1: "2020/03/09 10:55",
          col2: "微信",
          col3: "客服小美",
          col4: "未分组",
          col5: "8分45秒",
          col6: "5"
        }
      ],
      historyOrderData: [],
      blackListData: [],
      putDialogVisible: false,
      putOrderForm: {
        name1: "",
        name2: "",
        name3: "",
        name4: "",
        name5: "",
        name6: "",
        name7: "",
        name8: "",
        name9: "",
        name10: ""
      },
      blackDialogVisible: false,
      blackOrderForm: {},
      deleteDialogVisible: false,
      addDialogVisible: false,
      addOrderForm: {},
      rules: {
        customerName: {
          required: true,
          message: "请输入客户名称",
          trigger: ["change", "blur"]
        },
        email: {
          type: "email",
          message: "请输入正确的邮箱地址",
          trigger: ["blur", "change"]
        }
      },
      totalData: 0,
      currentPage: 1,
      pageSize: 4,
      totalData2: 0,
      currentPage2: 1,
      pageSize2: 4,
      csData: [],
      groupData: [],
      cusId: 0
    };
  },
  watch: {},
  computed: {
    customerServiceId() {
      return this.$store.state.profile.customerServiceId;
    }
  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size;
      this.getOrderData();
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getOrderData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSelectionChange2(val) {
      this.multipleSelection2 = val;
    },
    handleSizeChange2(size) {
      this.pageSize2 = size;
      this.getOrderData();
    },
    handleCurrentChange2(page) {
      this.currentPage2 = page;
      this.getBlackData();
    },
    cellStyle: function(row, column, rowIndex, columnIndex) {
      if (row.column.label === "满意度") {
        return "color:#3cd681";
      } else {
        return "";
      }
    },
    back() {
      this.$router.push("/customer");
    },
    getDetail(index, tableData) {
      this.$router.push({
        path: "order/detail",
        name: "order-detail",
        params: {
          data: tableData[index]
        }
      });
    },
    handleUpdateForm() {
      this.$refs.putOrderForm.validate(valid => {
        if (valid) {
          this.putDialogVisible = false;
          api.updateCustomerAPI(this.profileForm).then(res => {
            let { error, data } = res.data;
            if (error) {
              this.$message.error(data);
            } else {
              this.$message({
                message: "更新客户信息成功",
                type: "success"
              });
            }
          });
        } else {
          this.$message.error("表单填写有误");
        }
      });
    },
    resetForm() {
      this.$refs.addOrderForm.resetFields();
    },
    handleClean() {
      this.$refs.blackOrderForm.resetFields();
    },
    handleCreateOrder() {
      this.addDialogVisible = false;
      api
        .createOrderAPI({
          workType: this.addOrderForm.workType,
          title: this.addOrderForm.title,
          attachments: this.addOrderForm.attachments,
          cclist: this.addOrderForm.cclist,
          priority: this.addOrderForm.priority,
          state: this.addOrderForm.state,
          customerServiceGroupId: this.addOrderForm.customerServiceGroupId,
          customerServiceId: this.addOrderForm.customerServiceId,
          customerId: this.profileForm.id,
          channel: "手动录入"
        })
        .then(res => {
          let { error, data } = res.data;
          if (error) {
            this.$message.error(data);
          } else {
            this.getOrderData();
            this.$message({
              message: "工单创建成功",
              type: "success"
            });
          }
        });
    },
    handleBan() {
      this.blackDialogVisible = false;
      api
        .createBlackListAPI({
          reason: this.blackOrderForm.reason,
          customerId: this.profileForm.id,
          customerServiceId: this.customerServiceId,
          source: "客户中心"
        })
        .then(res => {
          let { error, data } = res.data;
          if (error) {
            this.$message.error(data);
          } else {
            this.getBlackData();
            this.$message({
              message: "拉黑成功",
              type: "success"
            });
          }
        });
    },
    getOrderData() {
      api
        .getHistoryOrderAPI({
          customerId: this.profileForm.id,
          page: this.currentPage,
          limit: this.pageSize
        })
        .then(res => {
          let { error, data } = res.data;
          if (error) {
            this.$message.error(data);
          } else {
            this.totalData = data.total;
            this.historyOrderData = data.page;
          }
        });
    },
    getBlackData() {
      api
        .getBlackListAPI({
          customerId: this.profileForm.id,
          page: this.currentPage2,
          limit: this.pageSize2
        })
        .then(res => {
          let { error, data } = res.data;
          if (error) {
            this.$message.error(data);
          } else {
            this.totalData2 = data.total;
            this.blackListData = data.page;
          }
        });
    },
    handleDelete() {
      this.deleteDialogVisible = false;
      api.deleteCustomerAPI(this.profileForm.id).then(res => {
        let { error, data } = res.data;
        if (error) {
          this.$message.error(data);
        } else {
          this.$message({
            message: "删除客户成功",
            type: "success"
          });
          this.back();
        }
      });
    }
  },
  created() {
    this.profileForm = this.$route.params;
    this.getOrderData();
    this.getBlackData();

    api.getAllGroupAPI({}).then(res => {
      let { error, data } = res.data;
      if (error) {
        this.$message.error("请求接口异常");
      } else {
        this.groupData = data.page;
      }
    });
    api.getAllCustomerServiceAPI({}).then(res => {
      let { error, data } = res.data;
      if (error) {
        this.$message.error("请求接口异常");
      } else {
        this.csData = data.page;
      }
    });
  },
  mounted() {}
};
</script>

<style scoped>
.detail-container {
  padding: 10px;
  display: flex;
  align-items: center;
}
.left-item-group {
  width: 25vw;
  height: 88vh;
  background-color: #fff;
  padding: 0 20px;
  box-sizing: border-box;
}
.right-item-group {
  width: 80vw;
  height: 88vh;
  background-color: #fff;
  margin-left: 10px;
  padding: 20px;
  box-sizing: border-box;
}
.info-label {
  font-size: 13px;
  color: #cfcfcf;
  display: inline-block;
  width: 80px;
}
.info-item {
  color: #4b4a4a;
  padding: 10px 0;
  font-size: 13px;
}
.info-bottom-group {
  margin-top: 15px;
}
.info-title {
  font-size: 18px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.customer-info {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #f2f2f2;
}
.right-top-item {
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
}
.right-top-left-group {
  display: flex;
  align-items: center;
}
.customer-info-group {
  padding-left: 15px;
}
.customer-name {
  font-size: 30px;
  font-weight: 500;
  padding-bottom: 5px;
}
.customer-city {
  font-size: 14px;
  color: #a2a2a2;
}
.right-bottom-item {
  padding: 10px 0;
}
.middle-table-gorup {
  padding-top: 15px;
}
.bottom-pagination-group {
  padding: 20px 0;
  float: right;
}
.add-dialog-style {
  height: 440px;
  overflow: auto;
  padding: 20px 10px;
  margin-top: 10px;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}
.black-dialog-style {
  height: 150px;
  padding: 20px;
  margin-top: 10px;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}
.delete-dialog-style {
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  padding: 20px;
  padding-bottom: 70px;
}
</style>
<style>
.el-tabs__item {
  margin-bottom: 10px;
}
.el-tabs__nav-wrap::after {
  height: 0.5px;
}
</style>
